<template>
  <div class="combination_box">
    <div class="list_title">权益服务费</div>
    <div class="list_content">
      <div class="bottom_box_list" v-for="item in list" :key="item.ID">
        <div class="bg_dome">{{ item.Name }}</div>
        <div>权益平台：{{ item.PlatformServiceRate * 100 }}%</div>
        <div class="last_dome">小程序：{{ item.EquityServiceRate * 100 }}%</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:
    "serviceCharge" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  watch: {},
  created() {},
  data() {
    return {
      octopus: this.$parent.octopus
    };
  },
  methods: {}
};
</script>
<style scoped>
.combination_box .list_title {
  font-size: 1.7rem;
  margin-top: 1.8rem;
}

.combination_box .list_content {
  width: 100%;
  display: -webkit-inline-box;
  margin-top: 1.5rem;
  overflow-x: auto;
}

.combination_box .bottom_box_list {
  width: 30rem;
  /* height: calc(25% - 1.5rem); */
  background-color: #fff;
  cursor: pointer;
  border-radius: 1.5rem;
  box-shadow: 2px 1px 9px 0px rgba(180, 171, 206, 0.25);
  /* padding: 1.8rem 1.8rem; */
  box-sizing: border-box;
  text-align: center;
  font-size: 1.7rem;
  margin-right: 1.5rem;
  overflow: hidden;
  border: 1px solid #f78c53;
  /* padding-top: 1.8rem; */
  color: #f78c53;
}
.combination_box .bottom_box_list > div {
  padding: 1rem 1.8rem;
  /* padding-bottom: 1.8rem; */
  border-bottom: 1px solid #f78c53;
}
.combination_box .bottom_box_list .last_dome {
  border: none;
}
.combination_box .bottom_box_list .bg_dome {
  background-color: #f78c53;
  color: #fff;
}

>>> .el-carousel__item {
  background: #fff;
  /* border-radius: 5rem; */
}
</style>
